<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>谷粒音乐</title>
    <link rel="stylesheet" href="tai.css" />
</head>

<body>
    <div id="wrap">
        <div class="scrollBar"></div>
        <div class="head">
            <div class="head-top">
                <!-- logo -->
                <h1 class="logo">
                    <a href="javascript:;">
                        <img src="img/logo.png" />
                    </a>
                </h1>
                <!-- 面包屑导航 -->
                <a href="javascript:;" class="menuBtn"></a>

                <!-- 按钮排 -->
                <div class="btns">
                    <a href="javascript:;" class="search">搜索</a>
                    <a href="javascript:;">登录</a>
                    <a href="javascript:;">注册</a>
                </div>
            </div>
            <div class="head-bottom">
                <form method="POST">
                    <input type="text" placeholder="碰我一下" />
                    <input type="submit" value="搜索" />
                </form>
            </div>
            <ul class="mask">
                <li>
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">MV</a>
                </li>
                <li>
                    <a href="javascript:;">V帮</a>
                </li>
                <li>
                    <a href="javascript:;">悦单</a>
                </li>
                <li>
                    <a href="javascript:;">音乐</a>
                </li>
                <li>
                    <a href="javascript:;">商城</a>
                </li>
                <li>
                    <a href="javascript:;">节目</a>
                </li>
                <li>
                    <a href="javascript:;">饭团</a>
                </li>
                <li>
                    <a href="javascript:;">咨询</a>
                </li>
                <li>
                    <a href="javascript:;">我的家</a>
                </li>
                <li>
                    <a href="javascript:;">APP下载</a>
                </li>
                <li>
                    <a href="javascript:;">热门应用</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div>
                <!-- 导航 -->
                <div class="customization-nav-drag-wrapper">
                    <ul class="list">
                        <li>
                            <a href="javascript:;" class="active">首页</a>
                        </li>
                        <li>
                            <a href="javascript:;">MV</a>
                        </li>
                        <li>
                            <a href="javascript:;">V帮</a>
                        </li>
                        <li>
                            <a href="javascript:;">悦单</a>
                        </li>
                        <li>
                            <a href="javascript:;">音乐</a>
                        </li>
                        <li>
                            <a href="javascript:;">商城</a>
                        </li>
                        <li>
                            <a href="javascript:;">节目</a>
                        </li>
                        <li>
                            <a href="javascript:;">饭团</a>
                        </li>
                        <li>
                            <a href="javascript:;">咨询</a>
                        </li>
                        <li>
                            <a href="javascript:;">我的家</a>
                        </li>
                        <li>
                            <a href="javascript:;">APP下载</a>
                        </li>
                        <li>
                            <a href="javascript:;">热门应用</a>
                        </li>
                    </ul>
                </div>
                <!-- 无痕滑屏 -->
                <div class="carousel-wrap" needAuto needCarousel>
                    <div class="point-wrap"></div>
                </div>
                <!-- tab选项卡 -->
                <div class="tab-wrap">
                    <div class="tap-head">
                        <h2>MV首播</h2>
                        <span>more &gt</span>
                    </div>
                    <div class="tab-nav">
                        <a href="javascript:;">全部</a>
                        <a href="javascript:;">内地</a>
                        <a href="javascript:;">欧美</a>
                        <a href="javascript:;">日韩</a>
                        <a href="javascript:;">泰国</a>
                        <div class="smallG"></div>
                    </div>
                    <div class="tab-content">
                        <ul class="tab-loading">
                            <li>
                                <a href="javascript:;">
                                    <img src="img/a.jpg" alt="">
                                    <span>キュン-日向坂46</span>
                                </a>
                                <div class="tab-discuss">
                                    <div class="right">
                                        <span></span>
                                        <span>
                                            12993
                                        </span>
                                    </div>
                                    <div class="left">
                                        <span></span>
                                        <span>
                                            1213
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="img/b.jpg" alt="">
                                    <span>キュン-日向坂46</span>
                                </a>
                                <div class="tab-discuss">
                                    <div class="right">
                                        <span></span>
                                        <span>
                                            12993
                                        </span>
                                    </div>
                                    <div class="left">
                                        <span></span>
                                        <span>
                                            1213
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="img/f.jpg" alt="">
                                    <span>キュン-日向坂46</span>
                                </a>
                                <div class="tab-discuss">
                                    <div class="right">
                                        <span></span>
                                        <span>
                                            12993
                                        </span>
                                    </div>
                                    <div class="left">
                                        <span></span>
                                        <span>
                                            1213
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="img/e.jpg" alt="">
                                    <span>キュン-日向坂46</span>
                                </a>
                                <div class="tab-discuss">
                                    <div class="right">
                                        <span></span>
                                        <span>
                                            12993
                                        </span>
                                    </div>
                                    <div class="left">
                                        <span></span>
                                        <span>
                                            1213
                                        </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="tab-loading"></ul>
                    </div>
                </div>
                <div class="tab-wrap">
                    <div class="tap-head">
                        <h2>热门推荐</h2>
                        <span>more &gt</span>
                    </div>
                    <div class="tab-content">
                        <ul class="tab-loading">
                            <li>
                                <a href="javascript:;">
                                    <img src="img/g.jpg" alt="">
                                    <span>分享成长与经历</span>
                                    <sub>周冬雨成长见面会</sub>
                                </a>
                                <a href="javascript:;">
                                    <img src="img/a.jpg" alt="">
                                    <span>分享成长与经历</span>
                                    <sub>周冬雨成长见面会</sub>
                                </a>
                                <a href="javascript:;">
                                    <img src="img/b.jpg" alt="">
                                    <span>分享成长与经历</span>
                                    <sub>周冬雨成长见面会</sub>
                                </a>
                                <a href="javascript:;">
                                    <img src="img/e.jpg" alt="">
                                    <span>分享成长与经历</span>
                                    <sub>周冬雨成长见面会</sub>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-wrap">
                        <div class="tap-head">
                            <h2>每日精选</h2>
                            <span>换一换</span>
                        </div>
                        <div class="tab-content">
                            <ul class="tab-loading">
                                <li>
                                    <a href="javascript:;">
                                        <img src="img/g.jpg" alt="">
                                        <span>分享成长与经历</span>
                                    </a>
                                    <a href="javascript:;">
                                        <img src="img/a.jpg" alt="">
                                        <span>分享成长与经历</span>
                                    </a>
                                    <a href="javascript:;">
                                        <img src="img/b.jpg" alt="">
                                        <span>分享成长与经历</span>

                                    </a>
                                    <a href="javascript:;">
                                        <img src="img/e.jpg" alt="">
                                        <span>分享成长与经历</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/tools.js"></script>
<script src="js/customization.js"></script>
<script>
    window.onload = function () {
        //全局时间默认的禁止
        document.addEventListener("touchstart", function (ev) {
            ev = ev || event;
            ev.preventDefault();
        });

        //rem适配方案
        (function () {
            var styleNode = document.createElement("style");
            var w = document.documentElement.clientWidth / 16;
            styleNode.innerHTML = "html{font-size:" + w + "px!important}";
            document.head.appendChild(styleNode);
        })()
        
        //头部效果
        var aNodes = document.querySelectorAll("#wrap .head .head-top .btns a");
        var headBottom = document.querySelector("#wrap .head .head-bottom");
        var bar = document.querySelector("#wrap .scrollBar");
        var head = document.querySelector("#wrap .head");
        var h = head.offsetHeight;
        var flag = true;
        aNodes[0].addEventListener("touchend", function () {
            //滚动条滚过头部高度时
            if (customization.css(bar, "translateY") > h) {
                if (flag) {
                    headBottom.style.display = "none";
                } else {
                    headBottom.style.display = "block";
                }
                flag = !flag;
            }
        })

        //竖向滑屏
        vMove();
        function vMove() {
            var headBottom = document.querySelector("#wrap .head .head-bottom");
            var head = document.querySelector("#wrap .head");
            var h = head.offsetHeight;
            var content = document.querySelector("#wrap .content");
            var wrap = document.querySelector("#wrap .content > div");
            var bar = document.querySelector("#wrap .scrollBar");
            var scale = document.documentElement.clientHeight / (head.offsetHeight + wrap.offsetHeight);
            bar.style.height = document.documentElement.clientHeight * scale + "px";
            var callback = {
                start: function () {
                    bar.style.opacity = 1;
                },
                move: function () {
                    var scale = customization.css(this, "translateY") / (wrap.offsetHeight - content.clientHeight);
                    //scale = 实时距离/最大距离
                    customization.css(bar, "translateY", -scale * (document.documentElement.clientHeight - bar.offsetHeight));
                    if (customization.css(bar, "translateY") > h) {
                        headBottom.style.display = "none";
                        flag = false;
                    } else if (customization.css(bar, "translateY") < h) {
                        headBottom.style.display = "block";
                        flag = true;
                    }
                },

                autoMove: function () {
                    var scale = customization.css(this, "translateY") / (wrap.offsetHeight - content.clientHeight);
                    //scale = 实时距离/最大距离
                    customization.css(bar, "translateY", -scale * (document.documentElement.clientHeight - bar.offsetHeight));
                },
                end: function () {
                    bar.style.opacity = 0;
                }
            }
            customization.vMove(content, callback);
        }


        //tab选项卡
        /*存值 存址
         * 	在部分手机的webview上  移动端事件的event对象指向了同一个引用
         * */
        tab();

        function tab() {
            var wrap = document.querySelectorAll("#wrap .content .tab-wrap");
            var w = 0;
            for (var i = 0; i < wrap.length; i++) {
                var nav = wrap[i].querySelector(".tab-nav");
                if (nav) {
                    w = wrap[i].offsetWidth;
                    var contentNode = wrap[i].querySelector(".tab-content");
                    move(contentNode);
                }
            }

            /* var contentNodes = document.querySelectorAll("#wrap .content .tab-wrap .tab-content");
             //var  loadings =  document.querySelectorAll("#wrap .content .tab-wrap .tab-content .tab-loading");
             var w = wrap.offsetWidth;
             for (var i = 0; i < contentNodes.length; i++) {
                 move(contentNodes[i]);
             }*/


            function move(content) {
                //抽象小绿的下标
                var now = 0;
                var smallG = content.parentNode.querySelector(".tab-nav .smallG");
                var aNodes = content.parentNode.querySelectorAll(".tab-nav a");
                smallG.style.width = aNodes[0].offsetWidth + "px";
                var loadings = content.querySelectorAll(".tab-loading");
                customization.css(content, "translateX", -w);
                //滑屏逻辑 content既是滑屏区域又是滑屏元素

                //var startPoint={x:0,y:0};
                var startPoint = {};
                var elementPoint = {x: 0, y: 0};
                var isX = true;
                var isFirst = true;

                //在1/2 跳转时  让整个jump逻辑干干净净的只触发一次
                var isOver = false;
                content.addEventListener("touchstart", function (ev) {
                    //isOver =false;
                    if (isOver) {
                        return;
                    }
                    ev = ev || event;
                    var touchC = ev.changedTouches[0];
                    //快照
                    //startPoint = {clientX:touchC.clientX,clientY:touchC.clientY};
                    startPoint = touchC;
                    elementPoint.x = customization.css(content, "translateX");
                    elementPoint.y = customization.css(content, "translateY");
                    isX = true;
                    isFirst = true;
                    content.style.transition = "none";
                })
                content.addEventListener("touchmove", function (ev) {
                    if (isOver) {
                        return;
                    }

                    if (!isX) {
                        return;
                    }
                    ev = ev || event;
                    var touchC = ev.changedTouches[0];
                    var nowPoint = {};
                    var dis = {x: 0, y: 0};
                    nowPoint = touchC;
                    dis.x = nowPoint.clientX - startPoint.clientX;//0
                    dis.y = nowPoint.clientY - startPoint.clientY;//0
                    if (isFirst) {
                        isFirst = false;
                        if (Math.abs(dis.y) > Math.abs(dis.x)) {

                            isX = false;
                            return;
                        }
                    }
                    var translateX = elementPoint.x + dis.x;
                    customization.css(content, "translateX", translateX);
                    jump(dis.x);
                })

                content.addEventListener("touchend", function (ev) {
                    if (isOver) {
                        return;
                    }
                    ev = ev || event;
                    var touchC = ev.changedTouches[0];
                    var nowPoint = {};
                    var dis = {x: 0, y: 0};
                    nowPoint = touchC;
                    dis.x = nowPoint.clientX - startPoint.clientX;
                    if (Math.abs(dis.x) <= w / 2) {
                        content.style.transition = "1s transform";
                        customization.css(content, "translateX", -w);
                    }
                })

                //1/2 跳转  ---> 请求
                function jump(disX) {
                    if (isOver) {
                        return;
                    }
                    if (Math.abs(disX) > w / 2) {
                        isOver = true;
                        content.style.transition = "1s transform";
                        var targetX = disX > 0 ? 0 : -2 * w;
                        customization.css(content, "translateX", targetX);
                        //请求一定要在动画执行完毕之后再发,
                        content.addEventListener("transitionend", endFn);
                        content.addEventListener("webkitTransitionEnd", endFn);
                        function endFn() {
                            /*
                             循环定时器   				回调函数的头部第一行清定时器
                            DOM2 绑定 transitionend事件    回调函数的头部第一行解绑事件
                            */
                            content.removeEventListener("transitionend", endFn);
                            content.removeEventListener("webkitTransitionEnd", endFn);
                            content.style.transition = "none";

                            /*超过 1/2
                             * 1.一开始loading图是隐藏的,loading图需要出现（ 1/2跳转后  请求发送前）
                             * 2.发送请求  处理请求  完成数据的渲染
                             * 		必须动画（content去0 或者 -2w位置）完成之后，再去进行这一系列的逻辑
                             * 								----   content要回到-w的位置
                             * */
                            for (var i = 0; i < loadings.length; i++) {
                                loadings[i].style.opacity = 1;
                            }
                            //对now进行控制
                            //往右滑 --   往左滑++
                            disX > 0 ? now-- : now++;
                            if (now < 0) {
                                now = aNodes.length - 1;
                            } else if (now > aNodes.length - 1) {
                                now = 0;
                            }

                            customization.css(smallG, "translateX", aNodes[now].offsetLeft);
                            if (aNodes[now].offsetWidth !== smallG.offsetWidth) {
                                smallG.style.width = aNodes[now].offsetWidth + "px";
                            }
                            //发ajax请求  去服务端拿数据（学完node之后来发一发）
                            //优雅
                            setTimeout(function () {
                                //成功  content要回到-w的位置  loading图隐藏
                                for (var i = 0; i < loadings.length; i++) {
                                    loadings[i].style.opacity = 0;
                                }
                                customization.css(content, "translateX", -w);
                                //最后一步
                                isOver = false;

                            }, 2000)
                        }
                    }
                }
            }
        }
        //导航点击变色
        changeColor();
        function changeColor() {
            var list = document.querySelector("#wrap .content .customization-nav-drag-wrapper .list");
            var aNodes = document.querySelectorAll("#wrap .content .customization-nav-drag-wrapper .list>li a");
            list.addEventListener("touchstart", function () {
                this.isMove = false;
            })
            list.addEventListener("touchmove", function () {
                this.isMove = true;
            })
            list.addEventListener("touchend", function (ev) {
                if (this.isMove) {
                    return;
                }
                ev = ev || event;
                var touchC = ev.changedTouches[0];
                for (var i = 0; i < aNodes.length; i++) {
                    tools.removeClass(aNodes[i], "active");
                }
                tools.addClass(touchC.target, "active");
                /*if(touchC.target.nodeName.toUpperCase()==="A"){
                    tools.addClass(touchC.target.parentNode,"active");
                }else if(touchC.target.nodeName.toUpperCase()==="LI"){
                    tools.addClass(touchC.target,"active");
                }*/
            })
        }
        //无缝滑屏
        swiper();
        function swiper() {
            var arr = ["img/a.jpg", "img/b.jpg", "img/e.jpg", "img/f.jpg", "img/g.jpg"]
            customization.carousel(arr);
        }

        //可拖拽的导航
        drag();
        function drag() {
            customization.dragNav();
        }
        //失获焦
        changeFocus()
        function changeFocus() {
            var inputText = document.querySelector("#wrap .head .head-bottom form input[type='text']");
            inputText.addEventListener("touchstart", function (ev) {
                ev = ev || event;
                this.focus();
                ev.stopPropagation();
                ev.preventDefault();
            })

            document.addEventListener("touchstart", function () {
                inputText.blur();
            })
        }
        //点击切换菜单按钮
        CMCFMenuBtn();
        function CMCFMenuBtn() {
            var menuBtn = document.querySelector("#wrap .head .head-top .menuBtn");
            var mask = document.querySelector("#wrap .head .mask");
            //isXX:false  频道按钮
            //isXX:ture	  XX按钮

            var isXX = false;
            menuBtn.addEventListener("touchstart", function (ev) {
                ev = ev || event;
                var touchC = ev.changedTouches[0];
                if (!isXX) {
                    tools.addClass(menuBtn, "active");
                    mask.style.display = "block";
                } else {
                    tools.removeClass(menuBtn, "active");
                    mask.style.display = "none";
                }
                isXX = !isXX;
                ev.stopPropagation();
                ev.preventDefault();
            })
            document.addEventListener("touchstart", function () {
                if (isXX) {
                    tools.removeClass(menuBtn, "active");
                    mask.style.display = "none";
                    isXX = !isXX;
                }
            })

            mask.addEventListener("touchstart", function (ev) {
                ev = ev || event;
                ev.stopPropagation();
                ev.preventDefault();
            })
        }
    }
</script>
</html>